/* CSS Document */

/* 화면너비 0px ~ 767px : 그리드 해제 */
@media screen and (max-width: 767px) {	
}

/* 화면너비 768px ~ 959px 동적그리드 적용 : 그리드 시스템 해제 */
@media screen and (min-width: 768px) and (max-width: 959px) {	
.container {
	margin: 0;
	padding: 0;
	}
.row {
	overflow: hidden;
	width: 100%;
	}
.row [class*=span] {
	float: left;
	margin-left: 2%;
	}
.row [class*=span]:first-child {
	margin-left: 0;
	}
.span_1, .span_2, .span_3, .span_4, .span_5, 
.span_6, .span_7, .span_8, .span_9, .span_10, 
.span_11, .span_12 {
	border: 1px dotted #CCFF00;
	}
	
.span_1 {
	width: 6.5%;
	*width: 6%;
	}
.span_2 {
	width: 15%;
	*width: 14.5%;
	}
.span_3 {
	width: 23.5%;
	*width: 23%;
	}
.span_4 {
	width: 32%;
	*width: 31.5%;
	}
.span_5 {
	width: 40.5%;
	*width: 40%;
	}
.span_6 {
	width: 49%;
	*width: 48.5%;
	}
.span_7 {
	width: 57.5%;
	*width: 57%;
	}
.span_8 {
	width: 66%;
	*width: 65.5%;
	}
.span_9 {
	width: 74.5%;
	*width: 74%;
	}
.span_10 {
	width: 83%;
	*width: 82.5%;
	}
.span_11 {
	width: 91.5%;
	*width: 91%;
	}
.span_12 {
	width: 100%;
	*width: 99.5%;
	}
}

/* 화면너비 960px 이상 : 정적그리드 적용 */
@media screen and (min-width: 960px) {	
.container {
	width: 960px;
	margin: 0 auto;
	}
.row {
	overflow: hidden;
	margin-left: 10px;
	margin-right: 10px;
	}
.span_1, .span_2, .span_3, .span_4, .span_5, 
.span_6, .span_7, .span_8, .span_9, .span_10, 
.span_11, .span_12 {
	float: left;
	border: 1px dotted #CCFF00;
	}
.span_1 { width: 60px;}
.span_2 { width: 140px;}
.span_3 { width: 220px;}
.span_4 { width: 300px;}
.span_5 { width: 380px;}
.span_6 { width: 460px;}
.span_7 { width: 540px;}
.span_8 { width: 620px;}
.span_9 { width: 700px;}
.span_10 { width: 780px;}
.span_11 { width: 860px;}
.span_12 { width: 940px;}
}

